<template>
	<div class="ma-container">
		<div class="ma">
			<div class="ma-head">
				<div class="name">{{ myActivityData.title }}</div>
				<div class="time">活动时间：{{ myActivityData.beginTime }}-{{ myActivityData.endTime }}</div>
				<div class="status" @click="toActivity(myActivityData.id)">活动详情</div>
			</div>
			<div class="ma-btns">
				<div class="btn" @click="downFile(myActivityData.materialInfo[0].specs_name,'培训材料')">培训材料下载</div>
				<div class="btn" @click="downFile(myActivityData.feedbackMaterial,'反馈表单')">反馈表单下载</div>
				<div class="btn" @click="showWin = true">物料物流信息查询</div>
				<div class="btn" @click="router.push('/question/submit')">反馈表单提交</div>
			</div>
			<div class="ma-warning">
				注：活动申请成功后请留意物料物流信息以免错过 <br>
				活动时间。 <b>*活动结束后请务必上传提交反馈表单。</b>
			</div>
			<div class="ma-step">
				<div class="step" :class="{ active: step >= 0 }">
					<div class="c">1</div><span>未审核</span>
				</div>
				<div class="line" :class="{ active: step >= 1 }"></div>
				<div class="step" :class="{ active: step >= 1 }">
					<div class="c">2</div><span>进行中</span>
				</div>
				<div class="line" :class="{ active: step >= 2 }"></div>
				<div class="step" :class="{ active: step >= 2 }">
					<div class="c">3</div><span>{{ step === 2 ? "已拒绝" : "已完成" }}</span>
				</div>
			</div>
			<div class="ma-win" v-show="showWin">
				<div class="logistical">
					<div class="number">快递单号：{{ myActivityData.express_company }}-{{ myActivityData.express_no }}</div>
					<div class="ul">
						<div class="li" v-for="item in logisticsData" :key="item.id">
							<div class="s">{{ item.status }}</div>
							<div class="c">
								<div class="t">{{ item.ftime }}</div>
								<p>{{ item.context }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="close" @click="showWin = false"></div>
			</div>
		</div>
	</div>
</template>


<script setup name="mydetail">
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useActivityApi } from '/@/api/activity';
import {downFile} from '/@/utils/globalMethods';
// import { userStore } from '../store/index'
// const userSData = userStore();

const props = defineProps(['data']);
const myActivityData=ref(props.data);
const logisticsData = ref({});
onMounted(() => {
	async function getLogistics() {
		const res = await useActivityApi().logistics({ id: myActivityData.value.id });
		if (res) {
			logisticsData.value = [...res.data];
		}
	}
	getLogistics()
})
const step = ref(3)
const showWin = ref(false)


function toActivity(id) {
	router.push({ path: '/activity/all/detail', query: { id: id }  })
}



</script>

<style scoped lang="scss">
.ma {
	margin: 10px auto 0;
	padding-bottom: 2px;
	border-radius: 20px 20px 0 0;
	background: #ffffff;
	height: calc(100vh - 54px - 75px);
	position: relative;
	overflow: auto;

	&-container {
		width: 100%;
		overflow: auto;
		height: 100vh;
	}

	&-head {
		box-sizing: border-box;
		padding: 25px 18px 0;
		position: relative;
		height: 120px;
		width: 100%;
		background: rgb(245, 245, 245);

		.name {
			height: 30px;
			line-height: 30px;
			text-align: left;
			font-size: 16px;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: rgb(62, 66, 73);
			margin-bottom: 15px;
		}

		.titme {
			font-size: 12px;
			color: rgb(146, 146, 176);
			height: 20px;
			line-height: 20px;
			text-align: left;
		}

		.status {
			width: 112px;
			height: 35px;
			font-size: 12px;
			font-weight: 400;
			color: rgb(251, 251, 251);
			text-align: center;
			line-height: 35px;
			cursor: pointer;
			background: rgb(233, 157, 66);
			position: absolute;
			bottom: 22px;
			right: 20px;

			&.apply {
				background: rgb(129, 179, 55);
			}
		}
	}

	&-btns {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 121px;
			height: 98px;
			font-size: 12px;
			font-weight: 400;
			color: rgb(251, 251, 251);
			background: rgb(64, 149, 229);
			margin: 0 32px 35px;
			line-height: 98px;
			text-align: center;
		}
	}

	&-warning {
		width: 320px;
		margin: 10px auto 20px;
		font-size: 14px;
		color: rgb(120, 120, 120);
		line-height: 24px;

		b {
			font-size: 14px;
			color: rgba(189, 49, 36, 1);
			font-weight: normal;
		}
	}

	&-step {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 285px;
		margin: 0 auto 10px;

		.step {
			width: 30px;
			position: relative;

			.c {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				text-align: center;
				line-height: 30px;
				color: white;
				font-size: 14px;
				background: #ccc;
				margin-bottom: 10px;
			}

			span {
				display: block;
				width: 60px;
				text-align: center;
				position: relative;
				left: -15px;
				color: #ccc;
			}

			&.active {
				.c {
					background: rgb(22, 127, 247);
				}

				span {
					color: rgb(22, 127, 247);
				}
			}
		}

		.line {
			width: 100px;
			margin-top: 15px;
			display: block;
			height: 1px;
			background: #ccc;

			&.active {
				background: rgb(22, 127, 247);
			}
		}
	}

	&-win {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 10;
		left: 0;
		top: 0;

		.close {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}

		.logistical {
			width: 100%;
			padding: 10px 25px 0;
			height: calc(100% - 160px);
			overflow: hidden;
			position: relative;
			background: #ffffff;
			margin: 0 auto;
			z-index: 2;

			.number {
				height: 50px;
				line-height: 45px;
				font-size: 16px;
				color: #333333;
				width: 100%;
				border-bottom: 1PX solid rgba(169, 168, 168, 0.25);
				margin-bottom: 25px;
			}

			.ul {

				width: 100%;
				overflow-y: auto;
				height: calc(100% - 90px);

			}

			.li {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;

				.s {
					width: 70px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14px;
					color: #aaa9a9;

					&::after {
						content: "";
						width: 10px;
						height: 9px;
						background: #032d84;
						transform: rotate(45deg);

					}

				}

				.c {
					width: 250px;
					font-size: 18px;
					line-height: 22px;
					color: #aaa9a9;
					padding-left: 18px;
					position: relative;
					box-sizing: border-box;
					padding-bottom: 30px;

					&::before {
						content: "";
						position: absolute;
						left: -6px;
						top: 0;
						width: 1px;
						height: 100%;
						border-right: 1px dashed #032d84;
					}
				}
			}
		}
	}
}
</style>